<template>
    <el-cascader v-model="value" placeholder="请选择加油站" :options="options" :props="props1"
            :show-all-levels="false" size="large" collapse-tags filterable clearable collapse-tags-tooltip required />
</template>
<script setup>
import {defineModel, ref, watch, defineProps, defineExpose, watchEffect, defineEmits} from 'vue'
import axios from 'axios'
import { ElMessage, genFileId } from 'element-plus';
import {idToValue} from '../utils/index.js'
const value = ref()
const model = defineModel()
watch(() => value.value, (val) => {
    // console.log(val);
    if (val) {
      if (props.multiple) {
      const options = val.map(item => {
          const len = item.length
          return item[len - 1]
      })
      model.value = options
    } else {
      const len = val.length
      model.value = val[len - 1]
    }
    }
    
})
const reset = () => {
  value.value = undefined
}
defineExpose({
  reset
})
const props1 = ref({
  multiple: true,
})
const props = defineProps({
    multiple: {
        type: Boolean,
        default: true
    }
})
watchEffect(() => {
  props1.value.multiple = props.multiple
})
const options = ref([])
axios.get('/system/user/deptTree').then(res => {
    const {data, code, msg} = res.data
    if (code != 200) {
      ElMessage.error(msg)
    } else {
      options.value = idToValue(data)
    }
})
</script>